<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    .demo {
      width: 70%;
      height: 400px;
      margin: 50px auto;
      border: 1px solid #ccc;
    }

    .btn-box {
      text-align: center;
    }

    .btn {
      margin: 0 5px;
      font-size: 20px;
    }

    .rebuild {
      margin: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="instance">
  <div class="demo"></div>
  <div class="btn-box">
    <button class="btn btn-primary" type="button" data-open>
      open
    </button>
    <button class="btn btn-danger" type="button" data-pause>
      pause
    </button>
  </div>
  <div class="rebuild">
    <div class="btn btn-default">
      重建粒子特效，性能测试
    </div>
  </div>
</div>

<script src="js/event.js"></script>
<script>
  // 暂停的时候被摧毁不触发 onDestroy 事件
  let i = 0

  function build() {
    console.log('build times: ', ++i)

    bind('#instance', function() {
      const effect = new JParticles.Particle('#instance .demo')

      effect.onDestroy(function() {
        console.log('1 - Canvas has been removed!!!')
      }, function() {
        console.log('2 - Canvas has been removed!!!')
      })

      effect.onDestroy(function() {
        console.log('3 - Canvas has been removed!!!')
      })

      return effect
    })
  }

  build()
  document.getElementsByClassName('rebuild')[0].onclick = build
</script>
</body>
</html>
